Clip Image inside div

Hi, I have a DIV in my webpage called largeImage declared as such

When someone does a mouseover on a thumbnail I am showing the big
image using the following code

function showImage(imageName)
{
document.getElementById('largeImage').innerHTML = ' >';
}

My problem is that sometimes the large image can be bigger then the
original DIV so I want to cut off the excess so to speak so that the
large image is not bigger than the original div.

Any help appreciated
Thanks in advance
Markus

Re: Clip Image inside div

Scripsit MarkusJNZ@gmail.com:

> When someone does a mouseover on a thumbnail I am showing the big
> image using the following code
>
> function showImage(imageName)

I hope you have some fallback, like a link, for users who have decided (or
whose superiors have decided) to switch of JavaScript execution.

> {
> document.getElementById('largeImage').innerHTML = ' >> ';
> }

Why invalid markup? There's never an acceptable reason to omit the alt
attribute.

Why do you use innerHTML instead of simply changing the value of the
element's src attribute (and possibly the alt attribute) in the code?

> My problem is that sometimes the large image can be bigger then the
> original DIV so I want to cut off the excess so to speak so that the
> large image is not bigger than the original div.

This part looks easy, though I might miss something since the answer looks
too obvious (but answers often are): add the following into your style
sheet:

#largeImage { overflow: hidden; }

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/